﻿$(window).load(function () {
    $(".loading").fadeOut()
})

/****/
/****/
$(document).ready(function () {
    var whei = $(window).width()
    $("html").css({fontSize: whei / 20})
    $(window).resize(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
    });
});


$(function () {

    echarts_1()
    echarts_2()
    echarts_3()

    function echarts_1() {
        var myChart = echarts.init(document.getElementById('echart1'));
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 500,
                max: 600,
                inRange: {
                    //colorLightness: [0, 1]
                }
            },
            series: [{
                name: '分布',
                type: 'pie',
                radius: ['30%', '60%'],
                center: ['50%', '50%'],
                color: ['#f8b62c', '#FE5050', '#0086e5', '#57bc2f'],
                data: [{
                    value: 70,
                    name: '微信'
                },
                    {
                        value: 50,
                        name: '支付宝'
                    },
                    {
                        value: 20,
                        name: '银行卡'
                    },
                    {
                        value: 15,
                        name: '其它'
                    }
                ].sort(function (a, b) {
                    return a.value - b.value
                }),
                roseType: 'radius',

                label: {
                    normal: {
                        formatter: ['{d|{d}%}', '{b|{b}}'].join('\n'),
                        rich: {
                            d: {
                                color: 'rgb(241,246,104)',
                                fontSize: 14,
                                fontWeight: 'bold',

                            },
                            b: {
                                color: 'rgb(98,137,169)',
                                fontSize: 12,

                            },
                        },
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgb(98,137,169)',
                        },
                        smooth: 0.2,
                        length: 5,
                        length2: 9,

                    }
                },
                itemStyle: {
                    normal: {
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 50,
                    }
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart3'));

        option = {
            color: ['#1aa1ff', '#31c17b', '#ff6535'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '10',
                top: '10%',
                right: '0%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                data: ['2014', '2015', '2016', '2017', '2018', '2019'],
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 14
                }
            },
            yAxis: {
                // name: "（人）",
                splitNumber: 4,
                nameTextStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 14
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 14
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        type: "dotted"
                    }
                },
            },
            series: [{
                type: 'line', // 将类型改为折线图
                smooth: true, // 添加平滑的曲线
                symbol: 'circle', // 显示数据点的形状为圆形
                showSymbol: true, // 显示数据点
                lineStyle: {
                    color: '#1aa1ff', // 设置折线的颜色
                    width: 2 // 设置折线的线宽
                },
                data: [5, 12, 35, 100, 150, 235]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));


        option = {
            color: ['#1aa1ff', '#31c17b', '#ff6535'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '10',
                top: '10%',
                right: '0%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                data: ['商超', '零销', '餐饮', '百货', '其它'],
                axisLine: {show: false,},
                axisLabel: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 14
                }
            },
            yAxis: {
                //name: "（人）",
                splitNumber: 4,
                nameTextStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 14
                },
                axisLine: {show: false,},
                axisLabel: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 14
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        type: "dotted"
                    }
                },
                //interval:100,
                //max:500

            },
            series: [{
                type: 'bar',
                barWidth: '30',
                itemStyle: {
                    normal: {
                        barBorderRadius: 2,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "#4693EC"
                        },
                            {
                                offset: 1,
                                color: "#00FFE3"
                            }
                        ]),
                        label: {

                            show: true,
                            position: 'top',
                            formatter: '{c}',
                            color: 'rgba(255,255,255,.4)',
                            fontSize: 12
                        }
                    },

                },

                data: [1250, 605, 264, 445, 125]

            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

})












